<template>
<div class="account-pages">
    <div class="account-box">
        <div class="account-logo-box pt-3">
            <h2 class="text-center text-dark">TradeLink</h2>
            <h6 class="text-center font-bold mt-3">{{$t('login')}}</h6>
        </div>
        <div class="account-content pt-3">
            <form class="form-horizontal">
                <div class="form-group row">
                    <div class="col-12">
                        <label for="phone">{{$t('label.phone')}}</label>
                        <vue-country-intl type="phone"
                                          v-model="countryCode"
                                          :onlyCountry="onlyCountry"
                                          selectedText=""></vue-country-intl>
                        <input id="phone" class="form-control mt-3" type="text" name="mobile"
                               data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                               :placeholder="$t('placeholder.phone')"
                               @keyup.enter="login($event)">
                        <input type="hidden" name="phonecode" :value="countryCode">
                    </div>
                </div>
                <div class="form-group row mb-3">
                    <div class="col-12">
                        <router-link to="/recover-password" class="text-muted pull-right">
                            <small>{{$t('forget.password')}}</small>
                        </router-link>
                        <label for="password">{{$t('label.password')}}</label>
                        <input id="password" class="form-control" type="password" name="user_pass" :placeholder="$t('placeholder.password')"
                               data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                               @keyup.enter="login($event)">
                    </div>
                </div>
                <div class="form-group row text-center m-t-10 zmtop">
                    <div class="col-12">
                        <button class="btn btn-block btn-gradient" type="button"
                                @click="login($event)">{{$t('login')}}
                        </button>
                    </div>
                </div>
            </form>
            <div class="row m-t-20">
                <div class="col-sm-12 text-center">
                    <div class="text-muted">
                        {{$t('no.account')}}
                        <router-link to="/register" class="text-dark m-l-5">
                            <b>{{$t('register')}}</b>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    layout: 'login',
    data() {
        return {
            countryCode: '86',
            onlyCountry: this.onlyCountry
        }
    },
    methods: {
        login: function (event) {
            const vm = this;
            let $form = $(event.target).closest('form');
            if (!$form.parsley().validate()) return;
            const api = vm.api;
            const http = vm.$http;
            const t = {
                "ok": vm.$t('btn.ok'),
                "msg": vm.$t('msg.login.fail')
            }

            http.post(api + 'UserLogin/checklogin', $form.serialize())
                .then(function (response) {
                    const data = response.data;
                    if ('0' === data.code) {
                        vm.$store.commit('login', data.data);
                        vm.$router.push('/account')
                    } else {
                        swal({
                            title: t.msg,
                            text: data.msg,
                            icon: 'info',
                            button: {
                                text: t.ok,
                                className: 'btn btn-gradient',
                            }
                        })
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        }
    }
}
</script>

<route-meta>
    {
    "anon": true
    }
</route-meta>
